
<template>
    <!-- 导航栏 -->
    <van-nav-bar
      :title="TypeName"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      z-index="1000"
      @click-left="back"
      @click-right="SearchShow = true"
    >
      <template #right>
        <van-icon name="search" size="20" />
      </template>
    </van-nav-bar>

    <!-- 下拉菜单 -->
    <van-sticky :offset-top="46">
      <van-dropdown-menu>
        <van-dropdown-item @change="TypeToggle" v-model="TypeActive" :options="TypeList" />
        <van-dropdown-item @change="FlagToggle" v-model="FlagActive" :options="FlagList" />
        <van-dropdown-item @change="SortToggle" v-model="SortActive" :options="SortList" />
        <van-dropdown-item @change="ByToggle" v-model="ByActive" :options="ByList" />
      </van-dropdown-menu>
    </van-sticky>

    <!-- 搜索框 -->
    <van-popup v-model:show="SearchShow" position="top">
      <van-search v-model="keywords" placeholder="请输入关键词" @search="search" />
    </van-popup>

    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="refreshing" @refresh="refresh">
      <!-- 加载列表 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        :offset="10"
        :immediate-check="false"
        finished-text="没有更多了"
        @load="load"
      >
        <ul class="proul">
          <li v-for="(item,key) in list" :key="key" >
            <router-link :to="{path:'/product/info', query:{proid:item.id}}">
              <van-image
                width="100%"
                height="auto"
                fit="cover"
                :src="item.thumb_text"
              />
            </router-link>

            <router-link :to="{path: '/product/info', query: {proid: item.id}}">
              <p class="tit">{{item.name}}</p>
            </router-link>
            <div class="price">
              <p>￥{{ item.price }} / {{item.unit_text}}<span>￥8999</span></p>
            </div>     
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>

    <!-- 返回顶部 -->
    <van-back-top />
</template>

<script setup>
  const {proxy} = getCurrentInstance()

  let TypeList = reactive([
    {text: '全部分类', value: '0'},
  ]);

//   console.log(TypeList)

  let FlagList = [
    {text: '全部商品', value: '0'},
    {text: '新品', value: '1'},
    {text: '热销', value: '2'},
    {text: '推荐', value: '3'},
  ];

  let SortList = [
    {text: '按上架时间', value: 'createtime'},
    {text: '按价格', value: 'price'},
    {text: '按库存', value: 'stock'}
  ];

  let ByList = [
    {text: '降序', value: 'desc'},
    {text: '升序', value: 'asc'},
  ];

  let TypeActive = ref('0')
  let FlagActive = ref('0')  //标志 1-新品 2-热销 3-推荐
  let SortActive = ref('createtime') //排序 上架时间 价格 库存
  let ByActive = ref('desc')  //desc 降序 asc 升序
  let SearchShow = ref(false) //搜索框的显示
  let keywords = ref('') //搜索关键词
  let TypeName = ref('全部分类') //标题栏上面的分类名称
  
  let list = ref([]) //数据列表
  let page = ref(1)  //分页
  let loading = ref(false) //加载状态
  let finished = ref(false) //是否无更多数据
  let refreshing = ref(false) //下拉刷新

  onMounted(() =>{
    Typedata()

    //触发刷新效果
    refresh()
  })

  const Typedata = async () => {
    var result = await proxy.$POST({
        url:'/product/type',
    })

    if(result.code == 0)
    {
        proxy.$fail(result.msg)
        return false
    }
    // console.log(result)
    //循环输出
    result.data.map(item => {
        // console.log(item)
        TypeList.push({text:item.name,value:item.id})
    })

    // console.log(TypeList)


  }

  //返回上一页w
  const back = () => proxy.$router.go(-1)

  //搜索事件
  const search = async () => 
  {
    SearchShow.value = false
    refreshing.value = true

    //触发刷新效果
    refresh()
  }

  //分类切换
  const TypeToggle = async (value) =>
  {
    // console.log(value)
    refreshing.value = true
    TypeActive.value = value
    refresh()
  }

  //属性切换
  const FlagToggle = async (value) =>
  {
    refreshing.value = true
    FlagActive.value = value
    refresh()
  }

  //排序切换
  const SortToggle = async (value) =>
  {
    refreshing.value = true
    SortActive.value = value
    refresh()
  }

  //升降序切换
  const ByToggle = async (value) =>
  {
    refreshing.value = true
    ByActive.value = value
    refresh()
  }

  //下拉刷新
  const refresh = async () =>
  {
    //可以去掉定时器
    setTimeout(() => {
      //清空查询参数
      page.value = 1
      list.value = []
      finished.value = false
      loading.value = true

      //加载数据方法
      load()
    }, 1000)
  }

  //加载数据方法
  const load = async () =>
  {

    //判断是否为加载中的状态
    if(refreshing.value)
    {
      refreshing.value = false
    }

    //请求发送完毕后，加载状态也就完毕了
    // loading.value = false

    //组装数据
    var datas = {
        typeid:TypeActive.value,
        flag:FlagActive.value,
        sort:SortActive.value,
        by:ByActive.value,
        keywords:keywords.value,
        page:page.value,
    }
    // console.log(datas)
    // return false

    var result = await proxy.$POST({
        url:'product/index',
        params:datas
    })
    // return false
    // console.log(result.data)

    //请求发送完毕后，加载状态也就完毕了
    loading.value = false

    if(!result)
    {
        return false
    }

    if(result.code == 0)
    {
        //如果没有更多数据了 就说明已经加载到底了....
        finished.value = true
        return
    }
    
    //合并
    list.value = list.value.concat(result.data.list)
    page.value++

    TypeName.value = result.data.TypeName
    // console.log(result.data.TypeName)
    // page.value++

    
    
    
  }
</script>

<style scoped>
  @import url('/assets/css/ProductIndex.css');
</style>